<template>
	<view>
		<Header title="补卡" :showBack="true"></Header>
		<view class="info">
			<view class="ava"></view>
			<view>
				<view>IC卡号：{{info.cardNo||'无'}}</view>
				<view>余&#12288;额：{{info.amount||'无'}}</view>
				<view>姓&#12288;名：{{info.ownerName||'无'}}</view>
				<view>状&#12288;态：{{info.statusFlagName||'无'}}</view>
			</view>
		</view>
		<view class="box">
			<view>注意：</view>
			<view>1. 申请补卡后原卡将失效无法消费</view>
			<view>2. 运营商补卡成功后将同步原卡余额至新卡</view>
			<view>3. 补卡费用：2元</view>
			<view class="font-line-height">4. 运营商预计3-7个工作日内完成补卡，高峰时期可能会超出预计时间，感谢您的理解</view>
			<view class="font-line-height">5. 运营商补卡成功后，工作人员会将新卡发放到学生手上</view>
			<button class="btn" @click="seeExpress" type="default">查看快递单号</button>
			<button class="btn" @click="pageJump" type="default" style="margin-top: 30upx;">申请补卡 (支付2元)</button>
		</view>
		
		<view class="mask">
			<u-overlay :show="show" @click="show = false">
					<view class="warp">
						<view class="rect" @tap.stop>
							<view class="title">快递信息</view>
							<view v-if="list.length>0" class="">
								<block v-for="(item,index) in list" :key="index">
									<view class="item">
										<view>快递单号：<text user-select>{{item.logisticsNo}}</text></view>
									</view>
								</block>
								
							</view>
							<view v-else>
								<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
							</view>
						</view>
					</view>
				</u-overlay>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:uni.getStorageSync('info'),
				appId:getApp().globalData.appId,
				replacementOrderNo: '',
				show: false,
				list: []
			}
		},
		methods: {
			pageJump(){
				uni.showModal({
					content: '您即将申请补卡，确定跳转填写邮寄地址',
					success: (col) => {
						if(col.confirm){
							uni.navigateTo({
								url: '/pages/deliveryAddress/deliveryAddress'
							})
						}
					}
				})
			},
			seeExpress(){
				let data = { "condition":{} };
				uni.showLoading({ mask: true })
				this.$http('/minprogram/api/member/getOwnerMemberCardReplacementList',data,res=>{
					uni.hideLoading()
					this.show = true
					this.list = res.data.items.filter(item=> item.logisticsNo != null)
				},'POST',err=>{
					uni.hideLoading()
					this.show = true
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.info{
		width: 640upx;
		background-color: #fff;
		display: flex;
		padding: 28upx 50upx;
		border-radius: 20upx;
		margin: 20upx auto 0;
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, 0.2);
		>view:nth-child(2){
			color: #2F230F;
			font-size: 28upx;
			>view{
				margin-bottom: 12upx;
			}
		}
	}
	.bg{
		width: 100%;
		background-image: url(../../static/img/bg.png);
		height: 100upx;
		background-size: 100% 100%;
	}
	.box{
		width: 640upx;
		background: rgba(255, 255, 255, .5);
		padding: 76upx 0upx 30upx;
		box-sizing: border-box;
		margin: 0 auto 20upx;
		border-radius: 10upx;
		margin-top: -16upx;
		>view{
			font-size: 26upx;
			color: #635846;
			padding: 0 50upx;
			margin-bottom: 16upx;
		}
		.font-line-height{
			line-height: 46upx;
		}
	}
	.btn{
		width: 90%;
		margin: 20vh auto 0;
		background-color: #ffa828;
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
	.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
	
		.rect {
			width: 690upx;
			background-color: #fff;
			border-radius: 16upx;
			padding: 20upx 0;
			.title{
				text-align: center;
				font-size: 30upx;
				margin-bottom: 26upx;
			}
			.item{
				font-size: 30upx;
				padding: 20upx 36upx;
				text{
					color: #1e90ff;
				}
			}
		}
</style>
